<template>
<div class="stat-container" v-loading="loading">
    <div class="header">
        <div>
            <el-radio-group v-model="timeSpan" @change="handleTimeSpanChange">
                <el-radio-button
                v-for="item in TimeSpan"
                :key="item"
                :label="item"
                />
            </el-radio-group>
            <el-date-picker
                v-model="date"
                v-bind="datePickerProps"
                @change="handleDateChange"
                :clearable="true"
            />
        </div>
        <div>
                <el-input
                v-model="userName"
                placeholder="请输入买家或卖家名字"
                :clearable="true"
                @clear="handleClearUserName"
                >
                    <el-select v-model="userType" slot="prepend" style="min-width: 75px;">
                        <el-option
                            v-for="item in UserType"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                    <el-button icon="el-icon-search" slot="append" @click="handleSearchName"/>
                </el-input>
        </div>
    </div>
    <!-- 年，月，日 -->
    <div class="stat-data-container" v-if="currentData && !currentData.week">
        <stat-card
            title="订单金额"
            unit="元"
            :currentData="currentData &&  currentData.orderMoney"
            :previousData="previousData && previousData .orderMoney"
        />
        <stat-card
            title="订单数量"
            unit="单"
            :currentData="currentData && currentData.orderNumber"
            :previousData="previousData && previousData.orderNumber"
        />
        <stat-card
            title="注册用户"
            unit="人"
            :currentData="currentData && currentData.registerNumber"
            :previousData="previousData && previousData.registerNumber"
        />
        <stat-card
            title="卖家用户"
            unit="人"
            :currentData="currentData && currentData.sellerNumber"
            :previousData="previousData && previousData.sellerNumber"
        />
    </div>
    <!-- 周 -->
    <div class="stat-data-container" v-else>
        <stat-card
            title="订单金额"
            unit="元"
            :currentData="currentData &&  currentData.salesAmountOfWeek"
            :previousData="currentData && currentData .salesAmountOfLastWeek"
        />
        <stat-card
            title="订单数量"
            unit="单"
            :currentData="currentData && currentData.orderCountOfWeek"
            :previousData="currentData && currentData.orderCountOfLastWeek"
        />
        <stat-card
            title="注册用户"
            unit="人"
            :currentData="currentData && currentData.registerCountOfWeek"
            :previousData="currentData && currentData.registerCountOfLastWeek"
        />
        <stat-card
            title="卖家用户"
            unit="人"
            :currentData="currentData && currentData.sellerCountOfWeek"
            :previousData="currentData && currentData.sellerCountOfLastWeek"
        />
    </div>
</div>
</template>
<script>
import moment, { months } from "moment";
import StatCard from "./statCard";
import { api } from "@/api/api.js";
const TimeSpan = ["年", "月", "周", "日"];
const UserType = ["买家", "卖家"];
export default {
  data() {
    return {
      timeSpan: TimeSpan[0],
      date: new Date(),
      userType: UserType[0],
      userName: "",
      currentData: null,
      previousData: null,
      loading: false
    };
  },
  watch: {},
  computed: {
    TimeSpan() {
      return TimeSpan;
    },
    UserType() {
      return UserType;
    },
    datePickerProps() {
      return {
        年: {
          type: "year",
          format: "yyyy年"
        },
        月: {
          type: "month",
          format: "yyyy年M月"
        },
        周: {
          type: "week",
          format: "yyyy年WW周"
        },
        日: {
          type: "date",
          format: "yyyy年M月d日"
        }
      }[this.timeSpan];
    }
  },
  methods: {
    handleTimeSpanChange(value) {
      this.date = new Date();
      this.fetchPageData();
    },
    handleDateChange(value) {
      this.fetchPageData();
    },
    handleSearchName() {
      this.fetchPageData();
    },
    handleClearUserName() {
      this.fetchPageData();
    },
    async fetchPageData() {
      const { date, timeSpan, userType, userName } = this;
      const currentDate = moment(date.valueOf());
      let currentTimeQuery, previousTimeQuery;
      if (timeSpan === "年") {
        const previousDate = currentDate.clone().subtract(1, "year");
        currentTimeQuery = {
          year: currentDate.year(),
          week: false
        };
        previousTimeQuery = {
          year: previousDate.year(),
            week: false
        };
      }

      if (timeSpan === "月") {
        const previousDate = currentDate.clone().subtract(1, "month");
        currentTimeQuery = {
          year: currentDate.year(),
          month: currentDate.month() + 1,
          week: false
        };
        previousTimeQuery = {
          year: previousDate.year(),
          month: previousDate.month() + 1,
          week: false
        };
      }

    if (timeSpan === "周") {
        const previousDate = currentDate.clone().subtract(1, "day");
        currentTimeQuery = {
            year: currentDate.year(),
            month: currentDate.month() + 1,
            day: currentDate.date() - currentDate.weekday() + 1 ,
            week: true
        };
        previousTimeQuery = {
            year: previousDate.year(),
            month: previousDate.month() + 1,
            day: previousDate.date() ,
            week: true
        };
    }

      if (timeSpan === "日") {
        const previousDate = currentDate.clone().subtract(1, "day");
        currentTimeQuery = {
          year: currentDate.year(),
          month: currentDate.month() + 1,
          day: currentDate.date(),
          week: false
        };
        previousTimeQuery = {
          year: previousDate.year(),
          month: previousDate.month() + 1,
          day: previousDate.date(),
          week: false
        };
      }

      let nameQuery = {};

      if (userName) {
        nameQuery =
          userType === "买家"
            ? { buyerName: userName }
            : { sellerName: userName };
      }

      console.log(currentTimeQuery, previousTimeQuery);

      try {
        this.loading = true;
        const [currentStatResponse, previousStatResponse] = await Promise.all([
          this.http.post(api.operationStatistics, {
            ...currentTimeQuery,
            ...nameQuery
          }),
          this.http.post(api.operationStatistics, {
            ...previousTimeQuery,
            ...nameQuery
          })
        ]);
        this.previousData = previousStatResponse.data;
        this.currentData = currentStatResponse.data;
        this.previousData = {
          ...previousStatResponse.data,
          orderMoney: (previousStatResponse.data.orderMoney / 100).toFixed(2),
          salesAmountOfLastWeek: (previousStatResponse.data.salesAmountOfLastWeek / 100).toFixed(2),
          week: previousTimeQuery.week
        };

        this.currentData = {
          ...currentStatResponse.data,
          orderMoney: (currentStatResponse.data.orderMoney / 100).toFixed(2),
          salesAmountOfWeek: (currentStatResponse.data.salesAmountOfWeek / 100).toFixed(2),
          salesAmountOfLastWeek: (previousStatResponse.data.salesAmountOfLastWeek / 100).toFixed(2),
          week: currentTimeQuery.week
        };
      } finally {
        this.loading = false;
        console.log('当前',this.currentData, '上期',this.previousData)
      }
    }
  },
  mounted() {
    this.fetchPageData();
  },
  components: {
    StatCard
  }
};
</script>
<style lang="scss" scoped>
.stat-container {
  .header {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .stat-data-container {
    width: 100%;
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
